<template>
  <view class="notice-container">
    <view class="notice-title">{{ detail.title }}</view>
    <image style="width: 100%;" :src="detail.picture"></image>
    <view class="notice-content">
      <u-parse
        :content="detail.contentAll"
        @preview="preview"
        @navigate="navigate"
      ></u-parse>
      <!-- <rich-text :nodes="detail.contentAll"></rich-text> -->
    </view>
  </view>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'
import { apiNoticeDetail } from '@/api/notice.js'
export default {
  data() {
    return {
      id: '',
      detail: {}
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getDetails()
    }
  },
  components: {
    uParse
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    },
    getDetails() {
      uni.showLoading({
        mask: true,
        title: '加载中'
      })
      apiNoticeDetail({ id: this.id })
        .then((res) => {
          console.log(res)
          let { code, data, msg } = res.data
          if (code == 200) {
            uni.hideLoading()
            this.detail = data
          } else {
            this.$am_toast.warning(msg)
          }
        })
        .catch((err) => {
          console.log(err)
          uni.hideLoading()
          this.$am_toast.warning('数据加载失败')
        })
    }
  }
}
</script>

<style lang="scss">
@import url('@/components/u-parse/u-parse.css');
page {
  background-color: #f5f5f5;
}
.notice-container {
  background-color: #ffffff;
  padding: 0 30rpx 30rpx;
}
.notice-title {
  margin-top: 16rpx;
  padding: 25rpx 0;
  font-size: 30rpx;
  font-weight: 400;
  color: #000000;
}
.notice-content {
  font-size: 26rpx;
  font-weight: 400;
  color: #666666;
  image {
    width: 700rpx;
    object-fit: cover;
  }
  .wxParse {
    padding: 0 24rpx;
    overflow: hidden;
  }
  .p {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text {
    // width: 700rpx;
    text-indent: 54rpx; 
  }
}
</style>
